<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>留言管理</title>
    <link rel="stylesheet" href="../css/mdui.css">
    <link rel="stylesheet" href="../css/main.css">
</head>

<body class="mdui-appbar-with-toolbar mdui-color-grey-50">

    <!-- 顶部导航栏 -->
    <header>
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="./message.html" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">arrow_back</i></a>
                <a href="../index.html" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <!-- 登出按钮 -->
                <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '退出登录'}">
                                <i class="mdui-icon material-icons">exit_to_app</i>
                </span>

            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->
    <p><br></p>
    <article class="mdui-container mdui-clearfix">

        <!-- 删除讨论对话框 -->
        <div class="mdui-dialog" id="delete-message">
            <div class="mdui-dialog-title">删除讨论</div>
            <div class="mdui-dialog-content">
                您确认要删除此条回复信息
            </div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                <button class="mdui-btn mdui-ripple">确认</button>
            </div>
        </div>

        <div class="mdui-row">
            <div class="mdui-table-fluid">
                <table class="mdui-table mdui-table-hoverable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>内容</th>
                            <th>用户名</th>
                            <th>时间</th>
                            <th class="mdui-text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>3</td>
                            <td>
                                一般来说，进程有三个状态，即就绪状态，运行状态，阻塞状态。
                            </td>
                            <td>刘同学</td>
                            <td>2019-6-25 20:24:14</td>
                            <td class="mdui-text-center">
                                <div class="mdui-btn-group">
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-green-600" mdui-dialog="{target: '#change-message',modal:'true'}">
                                                                   修改
                                                    </button>
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-red" mdui-dialog="{target: '#delete-message'}">
                                                                删除
                                                            </button>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>2</td>
                            <td>同问，这个问题该怎么解决</td>
                            <td>张同学</td>
                            <td>2019-6-10 20:24:14</td>
                            <td class="mdui-text-center">
                                <div class="mdui-btn-group">
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-green-600" mdui-dialog="{target: '#change-message',modal:'true'}">
                                                       修改
                                        </button>
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-red" mdui-dialog="{target: '#delete-message'}">
                                                    删除
                                                </button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>占楼，同问</td>
                            <td>赵同学</td>
                            <td>2019-6-6 20:24:14</td>
                            <td class="mdui-text-center">
                                <div class="mdui-btn-group">
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-green-600" mdui-dialog="{target: '#change-message',modal:'true'}">
                                                    修改
                                        </button>
                                    <button type="button" class="mdui-btn mdui-btn-dense mdui-ripple mdui-color-red" mdui-dialog="{target: '#delete-message'}">
                                                    删除
                                                </button>
                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <!-- 修改用户对话框 -->
            <div class="mdui-dialog" id="change-message">
                <div class="mdui-dialog-title">修改内容</div>
                <div class="mdui-dialog-content">
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <label class="mdui-textfield-label">内容详细</label>
                        <input class="mdui-textfield-input" type="text" required/>
                        <div class="mdui-textfield-error">此填写项不能为空</div>
                    </div>
                </div>
                <div class="mdui-dialog-actions">
                    <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                    <button class="mdui-btn mdui-ripple">保存</button>
                </div>
            </div>


    </article>



    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>

    <script src="../js/mdui.js"></script>
</body>

</html>